<template>
  <div class="welfare-notice">
    <img src="@/assets/gongshibgai.png" alt="">        
    <div class="welfare-item pb0">
      <p class="notice-title">{{info.title}}</p>
      <p class="time">{{info.create_time}}</p>
      <div class="work" v-html="info.content">
      </div>
    </div>
    <div v-for="(item,index) in welfare" class="section" v-bind:class="{'border-none':index!=0}">
      <div class="section-top clear">
        <span class="title">{{item.title}}</span>
        <span class="more" @click="router({path: './contribuList',query:{welfare:item.id,month:info.month}})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>
      <div class="list">
        <div v-for="v in item.log" class="item">
          <span class="name">{{v.nickname}}</span>
          <span class="phone">{{v.mobile}}</span>
          <span class="price">捐款<em>{{v.money}}</em>元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {welfarenotice} from '@/api/api'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'
import { commonShare } from "@/config/wxshare"

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
        },
        info:[],
        welfare:[],
      }
    },
    created () {
      this.welfarenotic()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      welfarenotic(){
        let id = this.$route.query.id
        welfarenotice(id).then((res) =>{
          this.info=res.data.data.info
          this.welfare=res.data.data.welfare
          commonShare('', '智慧宝公益项目公示', this.info.title);
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.welfare-notice
  min-height 100vh
  background-color #f5f5f5
  .welfare-item
    padding 0 1.5rem
    padding-bottom 2rem
    background-color #fff
    .notice-title
      color #333
      font-size 1.7rem
      height 1.7rem
      line-height 1.7rem
      font-weight 800
      padding-top 2rem
    .time
      color #999
      font-size 1.2rem
      line-height 1.8rem
      margin-top .6rem
    .work
      margin-top 2.5rem
      overflow hidden
      .img
        position relative
        left 50%      
      .type-img
        width 11.8rem
        margin-left -5.9rem
        margin-bottom 2rem
      .cons
        font-size 1.3rem
        color #666
        line-height 2.4rem
        margin-bottom 1.8rem
  .section
    background-color #fff
    padding 0 1.5rem
    margin-bottom 1rem
    &:last-child
      .section-top
        border none
    .section-top
      padding-top 3rem
      padding-bottom 2rem
      border-top 1px solid #e6e6e6
      .title
        color #333
        font-size 1.8rem
        line-height 1.8rem
        font-weight bold
        display block
        width calc(100% - 8rem)
        float left
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      .more
        color #999
        font-size 1.3rem
        line-height 1.8rem
        float right
        position relative
        padding-right 1rem
        .arrow
          width .4rem
          position absolute
          right 0
          top .55rem
    .list
      .item
        display flex
        border-bottom 1px solid #e6e6e6
        &:last-child
          border none
        span
          flex 1
          font-size 1.5rem
          color #999
          line-height 5rem
        .name
          width 7rem
          max-width 7rem
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .phone
          flex 2
        .price
          flex 1.5
          text-align right
          em
            color #A81E27
  .border-none
    border none
</style>
